<template>
<div class="main">
   <van-cell  title="培训计划"  v-model="data.PlanName"/>
   <van-cell  title="培训类型" v-model ="data.TrainTypeName" />
   <div class="block2" />
   <van-cell  title="开始时间" 
   :value="data.PlanStartTime | formatDate"
   />
   <van-cell  title="结束时间"
   :value="data.PlanFinishTime | formatDate"
    />
   <van-cell  title="发布人" v-model ="data.PublishChnName" />
   <van-cell  title="发布时间" v-model ="data.PublishDate" />
   <van-cell  title="说明" v-model="data.Introduce" />
  <div class="btn_submit">
          <van-button block type="info" @click="btnJoin" v-show="data.AllowJoin||data.AllowBrowse"> {{data.AllowJoin?"加入培训":"查看详情"}} </van-button>
  </div>
   </div>
</template>

<script>
import { Toast } from "vant";
export default {
  components: {},
  data() {
    return {

    data: {},
		// PlanName:"安全培训计划",
    // TrainTypeName:"培训类型",
    // PlanStartTime:"开始时间",
    // PlanFinishTime:"结束时间",
    // PublishChnName:"发布人",
    // PublishDate:"发布时间",
    // Introduce:"说明",
    // isAllowJoin:false,
    // AllowBrowse:false,
    code:"",
    ID :""
    };
  },
  created() {
     if (this.$route.query.PlanCode) {
       this.code = this.$route.query.PlanCode
     }
    this.GetSimpleInfo();
  },
  
  methods: {
    btnJoin(){
      if(this.data.AllowJoin){
        this.Join();
      }else{
        this.$router.push({path: "/TrainEntrustedPlanView",
        query: { id: this.data.ID }});
      }
  },
    GetSimpleInfo(){
      
      var me = this;
      let params = { code:this.code };
      this.$axios
        .get(this.$constUrl.TrainEntrustedPlan_GetSimpleInfo, { params: params })
        .then((res) => {
          me.data = res.data;
        });

    },
    Join(){
 
      var me = this;
      let params = { code:this.code };

      this.$axios
        .get(this.$constUrl.TrainEntrustedPlan_Join, { params: params })
        .then((res) => {

        //这里应该处理跳转到下个页面或者返回上个页面
        this.$router.push({path: "/TrainEntrustedPlanView",
          query: { id: this.data.ID }});
        });

    }
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.block2 {
  width: 0px;
  height: 10px;
  background-color: #fff;
}
</style>
